<template>
  <view class="container">
    <view class="top-headImg">
      <u--image :src="userInfo.token ? userInfo.headImgPath : 'http://1.116.226.250/source/image/null.png'" shape="circle" width="200rpx" height="200rpx">
      </u--image>
      <view class="icon">
        <u-icon name="edit-pen-fill" color="black" size="20"></u-icon>
      </view>
    </view>

    <view class="line-function">
      <u-cell-group>
        <u-cell icon="bookmark" title="昵称" :isLink="true" arrow-direction="right" :value="userInfo.token ? userInfo.nickname : '空'"
          :url="userInfo.token ? '/components/changeInfo/changeNickName/changeNickName' : '/components/myInfo/myInfo'"></u-cell>
        <u-cell :icon="getSexTag" title="性别" :isLink="true" arrow-direction="right" :value="userInfo.token ? userInfo.sex : '空'"
          :url="userInfo.token ? '/components/changeInfo/changeSex/changeSex' : '/components/myInfo/myInfo'"></u-cell>
        <u-cell icon="account" title="修改头像" :isLink="true" arrow-direction="right" :value="null"
          :url="userInfo.token ? './changeHeadImg/changeHeadImg' : '/components/myInfo/myInfo'"></u-cell>
      </u-cell-group>
    </view>
  </view>
</template>

<script>
  import {
    mapState,
    mapGetters
  } from 'vuex'
  export default {
    data() {
      return {
        
      };
    },
    computed: {
      ...mapState('user', ['userInfo']), // 获取用户信息
      ...mapGetters('user', ['getSexTag']) // 获取性别标识，根据选择不同进行icon替换
    },
  }
</script>

<style lang="scss" scoped>
  .container {
    display: flex;
    flex-direction: column;
    align-items: center;

    .top-headImg {
      width: 200rpx;
      height: 200rpx;
      margin-top: 60rpx;
      display: flex;
      flex-direction: row;

      .icon {
        position: relative;
        width: 20px;
        height: 20px;
        background-color: #fff;
        border-radius: 13px;
        left: -56rpx;
        top: 106rpx;
      }
    }

    .line-function {
      margin-top: 30rpx;
      width: 750rpx;
    }
  }
</style>
